<template>
<div class="team-list">
	<h1>Fontawesome Example</h1>
	<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
	<span class="sr-only">Loading...</span>

	<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
	<span class="sr-only">Loading...</span>

	<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
	<span class="sr-only">Loading...</span>

	<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
	<span class="sr-only">Loading...</span>

	<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
	<span class="sr-only">Loading...</span>

	<div class="list-group">
		<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
		<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
		<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
		<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
	</div>
</div>
</template>

<script>
export default {
	name: 'team-list',
	data () {
		return {
			msg: 'Welcome to Your Vue.js App',
			checked: true,
			activeName: 'second'
		};
	},
	methods: {
		handleClick (tab, event) {
			console.log(tab, event);
		}
	},
	created: function () {
		console.log('created team-list....');
	},
	mounted: function () {
		console.log('mounted team-list....');

	},
	beforeRouteEnter (to, from, next) {
		console.log('enter team-list....');
		next();
	},
	beforeRouteUpdate (to, from, next) {
		console.log('update team-list....');
		next();
	},
	beforeRouteLeave (to, from, next) {
		console.log('leave team-list....');
		next();
	}
};
</script>
